<template>
  <div>
    <el-row>
      <el-col :span="7">
        <el-form-item label="周期配置" prop="periodfrequency" :rules="rules.validateRequire.concat(rules.validateIntGteZero)">
          <el-input placeholder="几" v-model.number="value.periodfrequency" class="input-with-select">
            <el-select v-model="value.periodtype" slot="append" placeholder="单位" @change="changePeriodType">
              <el-option v-for="type in periodTypeList" :key="type.id" :label="type.name" :value="type.code.toString()"></el-option>
            </el-select>
            <template slot="prepend">
              每
            </template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="1" style="text-align:left">
        <el-form-item label-width="0">
          <tl-help>
            此处的开始时间与结束时间的选择主要用于设定周期中每一次会议的起止时间点，比如11-20 22：00至11-21 10：00指的是周期中每一次会议都需要跨天且持续12小时，具体每一次会议的起止日期则需配合周期设置及周期结束时间而来，最终结果可在预览周期会议列表时查看。
          </tl-help>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="" label-width="10px">
          <el-form-item label="" label-width="5px">
            <el-select v-model="value.daysequence" v-if="value.periodtype === 'week'">
              <el-option v-for="week in weekList" :key="week.value" :label="week.name" :value="week.value" />
            </el-select>
            <el-select v-model="value.monthrepeattype" v-if="value.periodtype === 'month'">
              <el-option v-for="month in monthList" :key="month.value" :label="month.name" :value="month.value" />
            </el-select>
          </el-form-item>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item label="结束于" :rules="rules.validateRequire">
          <el-radio-group v-model="value.stoptype">
            <el-radio-button v-for="type in stoptypeList" :key="type.value" :label="type.value">{{ type.name }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="4" class="center-input">
        <el-form-item label="" label-width="10px" prop="repeatcount" v-if="value.stoptype === 2" :rules="rules.validateRequire.concat(rules.validateIntGteZero)">
          <el-input placeholder="几" v-model.number="value.repeatcount" class="input-with-select">
            <template slot="append">
              次
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="" label-width="10px" prop="stoptime" v-if="value.stoptype === 1" :rules="rules.validateRequire">
          <el-date-picker v-model="value.stoptime" type="date" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="1">
        <el-form-item label="" label-width="5px">
          <el-popover placement="right" width="450" trigger="click" @show="doQueryPeroidLine">
            <el-table class="tl-table tl-table-fix" :data="periodDateList" height="200px" v-loading="queryLoading">
              <el-table-column width="250" property="date" align="center" label="日期"></el-table-column>
              <el-table-column width="150" property="name" align="center" label="名称"></el-table-column>
            </el-table>
            <el-button slot="reference" type="text" icon="el-icon-view">预览</el-button>
          </el-popover>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { validateIntGteZero } from '@tapui/utils/validateRule'
import { queryDataCode } from '@tapui/api/dataCode'
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
export default {
  data() {
    return {
      rules: {
        validateRequire: [
          // 必填
          { required: 'true', message: '请输入内容', trigger: 'change' }
        ],
        validateIntGteZero: [
          // 正整形校验
          { validator: validateIntGteZero }
        ],
        validateNumber: [
          // 数字校验
          { type: 'number', message: '请输入数字', trigger: 'change' }
        ]
      },
      // 下面是周期相关
      periodTypeList: [],
      weekList: [{ name: '周一', value: 1 }, { name: '周二', value: 2 }, { name: '周三', value: 3 }, { name: '周四', value: 4 }, { name: '周五', value: 5 }, { name: '周六', value: 6 }, { name: '周日', value: 7 }],
      monthList: [],
      stoptypeList: [{ name: '按日期', value: 1 }, { name: '按次数', value: 2 }],
      queryLoading: false,
      url: {
        queryPeriodDate: '/work/task/queryPeriodDateList'
      },
      periodDateList: []
    }
  },
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 周期相关
    changePeriodType(notInit) {
      if (this.value.periodtype === 'month') {
        this.chargeMonthList()
        if (!this.value.monthrepeattype || this.value.monthrepeattype === '') {
          this.$set(this.value, 'monthrepeattype', 2)
        }
      } else if (this.value.periodtype === 'week') {
        this.$set(this.value, 'monthrepeattype', null)
        if (!this.value.begintimeDate) {
          this.$set(this.value, 'daysequence', 1)
        } else {
          let date = new Date(this.value.begintimeDate)
          this.$set(this.value, 'daysequence', date.getDay() === 0 ? 7 : date.getDay())
        }
      }
    },
    // 周期会议计算每月第几天
    chargeMonthList() {
      if (!this.value.begintimeDate) return
      let date = new Date(this.value.begintimeDate)
      let daySeq = date.getDate()
      let weekSeq = date.getDay()
      let monthWeekSeq = Math.ceil(date.getDate() / 7)
      if (weekSeq === 0) weekSeq = 7
      this.monthList = []
      this.monthList.push({
        name: '每月第' + daySeq + '天',
        value: 2
      })
      this.monthList.push({
        name: '每月第' + monthWeekSeq + '个' + this.weekList.find((m) => m.value === weekSeq).name,
        value: 1
      })

      this.$set(this.value, 'monthRepeatDay', daySeq)
      this.$set(this.value, 'monthRepeatWeekSeq', monthWeekSeq)
      this.$set(this.value, 'monthRepeatWeek', weekSeq)
    },
    // 查看周期序列
    doQueryPeroidLine() {
      this.$set(this.value, 'begintime', `${this.value.begintimeDate} ${this.value.begintimeTime}`)
      this.$set(this.value, 'endtime', `${this.value.endtimeDate} ${this.value.endtimeTime}`)
      let beginTime = new Date(this.value.begintime)
      let endTime = new Date(this.value.endtime)
      if (endTime <= beginTime) {
        this.$tap.alert('结束时间不能早于开始时间！')
        return false
      }
      this.queryLoading = true
      if (this.value.stoptype === 1) {
        this.$set(this.value, 'repeatcount', 0)
      } else {
        this.$set(this.value, 'stoptime', null)
      }
      var numberReg = /^[0-9]*$/
      var numExp = new RegExp(numberReg)
      if (!numExp.test(this.value.repeatcount)) {
        this.$tap.alert('结束次数必须数字！')
        return false
      }
      // 周期任务中按月选择后。判断选择的是每月第多少天还是每月第几个周的周几
      if (this.value.periodtype === 'month') {
        if (this.value.monthrepeattype === 1) {
          // 每月第几周的周几
          this.$set(this.value, 'daysequence', this.value.monthRepeatWeek)
          this.$set(this.value, 'weeksequence', this.value.monthRepeatWeekSeq)
        } else {
          // 每月第多少天
          this.$set(this.value, 'daysequence', this.value.monthRepeatDay)
          this.$set(this.value, 'weeksequence', null)
        }
      }
       /** 周期参数，不能使用this.value */
      let queryPeroidParams = {}
      queryPeroidParams.begintime = this.value.begintime
      queryPeroidParams.endtime = this.value.endtime
      queryPeroidParams.periodtype = this.value.periodtype
      queryPeroidParams.periodfrequency = this.value.periodfrequency
      queryPeroidParams.monthrepeattype = this.value.monthrepeattype
      queryPeroidParams.repeatcount = this.value.repeatcount
      queryPeroidParams.stoptime = this.value.stoptime
      queryPeroidParams.daysequence = this.value.daysequence
      queryPeroidParams.weeksequence = this.value.weeksequence
      queryPeroidParams.stoptype = this.value.stoptype
      /** 周期参数 */
      getAction(this.url.queryPeriodDate, queryPeroidParams).then((res) => {
        if (res.success) {
          this.periodDateList = res.result
        } else {
          this.periodDateList = []
          this.$tap.message(res.message + ',请重新填写周期配置', 'error')
        }
        this.queryLoading = false
      })
    }
  },
  created() {
    queryDataCode({ itemCodes: 'WorkPeriodType' }).then((res) => {
      this.periodTypeList = res.result.WorkPeriodType
    })
  },
  watch: {
    value(newValue, oldValue) {
      if (newValue) {
        if (!this.value.periodtype || this.value.periodtype === null || this.value.periodtype === '') {
          this.$set(this.value, 'periodtype', 'week')
        }
        if (!this.value.periodfrequency || this.value.periodfrequency < 1) {
          this.$set(this.value, 'periodfrequency', 1)
        }
        if (this.value.periodtype === 'month') {
          this.chargeMonthList()
        }
      } else {
        this.$set(this.value, 'periodtype', '')
        this.$set(this.value, 'periodfrequency', 0)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.tag-container {
  .el-tag {
    margin-right: 5px;
  }
}
.color-block {
  display: inline-block;
  height: 15px;
  width: 15px;
}
.input-with-select {
  .el-select {
    width: 60px;
  }
}
</style>
